<template>
    <div class='bgff pd pt10 pm10 aboutUs'>
        <div class="productCenter-top">
            <img :src="form.head.img" class="productCenter-top-img">
            <div class="wd pr h100" @click="photoShowModal = true">
                <div class="vertical-center tl h100">
                    <div @click.stop="nullfun" class="w100">
                        <p class="fz18 cf">
                            <n-input v-model:value="form.head.msg" type="text" placeholder="" size="medium"
                                clearable></n-input>
                        </p>
                        <div class="title-text fz32 flex-1 cf mt10">
                            <n-input class="fz32" v-model:value="form.head.title" type="text" placeholder=""
                                size="medium" clearable></n-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <p class="mt40 fz32">
            产品中心
        </p>
        <div class="mt60  productCenter-case wd">


            <div class="productCenter-case-item" v-for="(item, idx) in cplist" :key="idx"
                @click="hf('djbjproducts', { id: item.id })">
                <div class="productCenter-case-item-top pr">
                    <img :src="item.cover" class="fm cz">
                    <div class="productCenter-case-item-pup vertical-center">
                        <a class="digihealth digihealth-xiangqing_moren red fz40 pr vertical-center">
                            <i class="digihealth digihealth-a-gengduowuwenzi_moren cf right-icon"></i>
                        </a>
                    </div>


                    <div class="pup-paixu vertical-center">
                        <div class="display-flex  w100">
                            <i class="iconfont dx-houtui sz fz32 flex-1 cf" @click.stop="paixu(item.id, 1)"></i>
                            <i class="iconfont dx-shanchu fz40 sz flex-1 cf"  @click.stop="delimgse(item.id)"></i>
                            <i class="iconfont dx-qianjin sz fz32 cf" @click.stop="paixu(item.id, 2)"></i>
                        </div>
                    </div>



                </div>
                <div class="productCenter-case-item-bottom">
                    {{ item.title }}
                </div>
            </div>
            <div class="products-context vertical-center fz20 sz" @click="hf('djbjproducts')">
                点击添加产品
            </div>
        </div>


        <div class="mt40">
            <n-input v-model:value="form.kernel.title" type="text" placeholder="" size="medium" clearable
                @change=""></n-input>
            <n-input class="mt10" v-model:value="form.kernel.msg" type="text" placeholder="" size="medium" clearable
                @change=""></n-input>

        </div>


        <div class="wd core-technology mt40">
            <div v-for="(item, idx) in form.kernel.list" class="pr">
                <p class="cen coreTechnologyIcon-img-box">
                    <img :src="item.img" class="cz" @click="upkerimg(item)">
                </p>
                <p class="fz22 cen mt10">
                    <n-input v-model:value="item.title" type="text" placeholder="" size="medium" clearable
                        @change=""></n-input>

                </p>
                <p class="coreTechnologyIcon-text mt20 cen">
                    <n-input v-model:value="item.msg" type="textarea" placeholder="" size="medium" clearable
                        @change=""></n-input>

                </p>
                <i class="dx-shanchu iconfont red drtytsaxe3" @click="delimgteam(idx)"></i>
            </div>
            <div class="products-context vertical-center fz20 sz" @click="addHx">
                点击添核心技术
            </div>


        </div>


        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>头图</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="迪聚海思头图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>核心技术logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="迪聚海思核心技术logo"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

        <div class="aboutUs-bottom vertical-center">
            <div>
                <n-button type="primary" size="medium" @click="aboutSave">保存</n-button>
                <n-button type="primary" size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </div>

        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { callBack, dxpost, qurl, dxget, hf,dxdel } from "../../../util/index"
import photoGallery from "../../../components/util/photoGallery";
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const cplist = ref()
const form = ref({
    head: {
        img: "",
        title: "",
        msg: ""
    },
    kernel: {
        title: "",
        msg: "",
        list: [
        ]
    }
})
const dqItem = ref()
let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    form.value.head.img = jjnmnxe;
    photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    console.log(jjnmnxeer);
    dqItem.value.img = jjnmnxeer
    photoShowModaler.value = false;
};

const upkerimg = (item) => {
    photoShowModaler.value = true
    dqItem.value = item
}

const addHx = () => {
    form.value.kernel.list.push({
        img: "",
        title: "",
        msg: ""
    })
}


const aboutSave = async () => {
    const { errno }: any = await dxpost("djhs/djsinglePage", {
        id: 5,
        detail: JSON.stringify(form.value)
    }, "put")
    if (errno == 0) {
        window.$message.success("操作成功！")
    }
}
const delimgteam = (idx) => {
    form.value.kernel.list.splice(idx, 1)
}
const getdetail = async () => {
    const { data }: any = await dxget("djhs/djsinglePage", { id: 5 })
    if (data.detail) {
        form.value = JSON.parse(data.detail)
    }

}



const getdjproductManagement = async () => {
    const { data }: any = await dxget("djhs/djproductManagement")
    console.log(data);
    cplist.value = data

}

getdjproductManagement()
getdetail()
const nullfun = () => {
    console.log('66');
}



const paixu = async (id, zt) => {
    const { errno, data }: any = await dxget("util/changeSeats", {
        databaseName: "djproductManagement",
        id,
        zt,
    });
    if (errno == 0) {
        getdjproductManagement()
        window.$message.success(data);
    } else {
        console.error(data);
    }
};
const delimgse = async(id)=>{
    await await dxdel('djhs/djproductManagement',{id})
    window.$message.success("操作成功");
    getdjproductManagement()
}
</script>
<style scoped>
.products-context {
    width: 300px;
    height: 150px;
    border: 1px dashed #e0e0e0;
}

.coreTechnologyIcon-img-box img {
    background: #f8f8f8;
    min-width: 80px;
    min-height: 80px;
}

.drtytsaxe3 {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 22px;
    color: red;
    cursor: pointer;
}

.pup-paixu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
</style>